<template>
  <div class="map" id="mapEchart" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
// 引入工具
import geoJson from "./sichuan.json"; //该文件路径改成自己项目中的文件路径即可
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
import { nextTick } from "vue";
import { onMounted } from "vue";

// 定义echarts方法
const chartMap = () => {
  let myChart = echarts.init(document.getElementById("mapEchart"));
  // 重点：不要遗漏这句代码！！
  //@ts-expect-error 忽略报错
  echarts.registerMap("sichuan", geoJson);
  // 图表配置项
  let option = {
    tooltip: {
      show: true
    },
    //3D地图配置项
    geo3D: {
      map: "sichuan",
      roam: true,
      itemStyle: {
        color: "#0b264c",
        opacity: 1,
        borderWidth: 1,
        borderColor: "#09c3c1"
        // areaColor: "#fff"
      },
      viewControl: {
        autoRotate: false,
        autoRotateAfterStill: 3,
        distance: 120,
        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
        animation: true, // 是否开启动画。[ default: true ]
        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
      },
      emphasis: {
        disabled: false, //是否可以被选中
        label: {
          //移入时的高亮文本
          show: true,
          color: "#000", //显示字体颜色变淡
          fontSize: 12 //显示字体变大
        },
        itemStyle: {
          color: "#f24573" //显示移入的区块变粉色
        }
      },
      label: {
        show: true,
        position: "center",
        color: "#fff", //地图初始化区域字体颜色
        fontSize: 12,
        lineHeight: 0
      },
      // shading: "lambert",
      light: {
        //光照阴影
        main: {
          color: "#0ac0c1", //光照颜色
          intensity: 10, //光照强度
          // shadowQuality: "high", //阴影亮度
          shadow: true, //是否显示阴影
          shadowQuality: "high", //阴影质量 ultra //阴影亮度
          alpha: 6,
          beta: 0
        },
        ambient: {
          intensity: 0.7
        }
      }
    }
  };
  myChart.setOption(option);
  //让可视化地图跟随浏览器大小缩放
  // window.addEventListener("resize", () => {
  //   charts.resize();
  // });
};

onMounted(() => {
  // 挂载echart
  nextTick(() => chartMap());
});
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 96%;
}
</style>
